<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.div1{
				position: absolute;
				width: 100px;
				height: 100px;
				top: 50px;
				left: 10px;
				background: red;
			}
		</style>
	</head>
	<body>
		<button id="btn1">逐渐扩大</button>
		<button id="btn2">移动到指定位置</button>
		<button id="btn3">移动指定距离</button>
		<button id="btn4">停止动画</button>
		
		<div class="div1">
			爱在西元前, 学在尚硅谷
		</div>
		
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			/*			
			jQuery动画的本质: 在指定时间内不断改变元素样式值来实现的
			1. animate(): 自动以动画效果的动画
			2. stop(): 停止动画	
			*/
			$(function(){
				$("#btn1").click(function(){
					/*
					$(".div1").animate({
						width: 200,
						height: 200
					}, 1000)
					*/
					$(".div1").animate({
						width: 200
					}, 1000).animate({
						height: 200
					}, 1000)
				})
				$("#btn2").click(function(){
					$(".div1").animate({
						top: 50,
						left: 500
					})
				})
				$("#btn3").click(function(){
					$(".div1").animate({
						top: "+=100",
						left: "+=100"
					},3000)
				})
				$("#btn4").click(function(){
					$(".div1").stop()
				})
			})
		</script>
	</body>
</html>
